<template>
	<div id="Comment">
		<x-header :left-options="{showBack:false}" title="发布评论" class="header">
			<a slot="left" @click="common.back()"><i class="tp-icon icon-black-back"></i></a>
			<a slot="right" @click=""><i class="tp-icon icon-invoice-more"></i></a>
		</x-header>
		<div class="product-list">
			<div class="product-item" v-for="(item,index) in goods">
				<div class="product">
					<div class="img">
						<img :src="item.goods.goods_thumb" />
					</div>
					<div class="detail">
						<p class="name">{{item.goods.goods_name}}</p>
						<p class="price"><span class="now-price"><i>￥</i>{{item.goods_price}}</span><span class="orig-price">￥{{item.goods.goods_price}}</span></p>
					</div>
					<div class="add-cart">
						<router-link :to="'/shop/shopingDetial/id/'+item.commodity_id">
							<span>×{{item.goods_num}}</span>
						</router-link>
					</div>
				</div>
				<div class="intro">
					<div class="name">描述相符</div>
					<div class="score">
						<star :score="score[index]" :level="level[index]" @change="getScore"></star>
					</div>
				</div>
				<div class="comment">
					<textarea class="txtarea-comment" v-model="content[index]" placeholder="外形如何？品质如何？成色如何？写写你的使用心得分享给想买的他们吧..."></textarea>
					<div class="img-list" id="imgList">
						<div id="photos">
							<div class="item" v-for="(item2,index2) in imgval">
								<img :src="'/los' + item2" />
								<p class="add">主图</p>
								<a @click="delUploadImg(index2)" href="javascript:;" class="del">删除</a>
								<input type="hidden" id="images" name="images[]" :value="item2" accept="image/*" />
							</div>
							<div class="item">
								<img src="../assets/images/icon/icon_logo.png" />
								<p class="add">主图</p>
								<a @click="delUploadImg(index2)" href="javascript:;" class="del">删除</a>
								<input type="hidden" id="images" name="images[]" accept="image/*" />
							</div>
						</div>
						<div class="last" @click="wxChooseImage">
							<a href="javascript:;" class="upload">
								<img src="../assets/images/icon/ic_evaluate_camera.png" />
								<span>添加图片</span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="other">
			<div class="intro">
				<div class="name">服务态度</div>
				<div class="score">
					<star :score="service" :level="serlevel" @change="getService"></star>
				</div>
			</div>
			<div class="intro">
				<div class="name">发货速度</div>
				<div class="score">
					<star :score="speed" :level="spelevel" @change="getSpeed"></star>
				</div>
			</div>
		</div>
		<a href="javascript:;" class="my-btn btn-success comment-add" @click="submitComment">立即发布</a>
	</div>
</template>

<script>
	import Vue from 'vue'
	import $ from 'jquery';
	import star from './Star';
	import {
		Icon,
		XHeader,
		Toast,
		Checker,
		CheckerItem
	} from 'vux';

	export default {
		data() {
			return {
				commodity_id:'',
				commodity_ids:[],
				goods:'',
				order_sn:'',
				starval:[
					{
						value:'1',
						text:'失望',
						icon:'level-score-1',
						active:true
					},
					{
						value:'2',
						text:'一般',
						icon:'level-score-2',
						active:true
					},
					{
						value:'3',
						text:'满意',
						icon:'level-score-3',
						active:true
					},{
						value:'4',
						text:'喜欢',
						icon:'level-score-4',
						active:true
					},{
						value:'5',
						text:'超爱',
						icon:'level-score-5',
						active:true
					}
				],
				levelval:{
					value:'5',
					text:'超爱',
					icon:'level-score-5',
					active:true
				},
				score:[],
				level:[],
				service:[
					{
						value:'1',
						text:'失望',
						icon:'level-score-1',
						active:true
					},
					{
						value:'2',
						text:'一般',
						icon:'level-score-2',
						active:true
					},
					{
						value:'3',
						text:'满意',
						icon:'level-score-3',
						active:true
					},{
						value:'4',
						text:'喜欢',
						icon:'level-score-4',
						active:true
					},{
						value:'5',
						text:'超爱',
						icon:'level-score-5',
						active:true
					}
				],
				serlevel:{
					value:'5',
					text:'超爱',
					icon:'level-score-5',
					active:true
				},
				speed:[
					{
						value:'1',
						text:'失望',
						icon:'level-score-1',
						active:true
					},
					{
						value:'2',
						text:'一般',
						icon:'level-score-2',
						active:true
					},
					{
						value:'3',
						text:'满意',
						icon:'level-score-3',
						active:true
					},{
						value:'4',
						text:'喜欢',
						icon:'level-score-4',
						active:true
					},{
						value:'5',
						text:'超爱',
						icon:'level-score-5',
						active:true
					}
				],
				spelevel:{
					value:'5',
					text:'超爱',
					icon:'level-score-5',
					active:true
				},
				formdata:[],
				imgval: [],
				scoreval:'5',
				serviceval:'5',
				speedval:'5',
				content:[],
				sku_id:[]
			}
		},
		components: {
			Icon,
			XHeader,
			Toast,
			Checker,
			CheckerItem,
			star
		},
		watch: {},
		mounted() {
			this.getWXUpload();
			this.getId();
			this.getOrderInfo();
		},
		activated() {

		},
		deactivated() {
			
		},
		created() {

		},
		//方法
		methods: {
			//返回
			back:function(){
				window.history.go(-1);
			},
			//获取路由参数
			getId:function(){
				this.commodity_id = this.$route.params.id;
			},
			//产品详情
			getOrderInfo: function() {
				this.order_sn = this.$route.params.order_sn;
				this.$http({
					method: 'GET',
					url: '/los/api/mall_member/comment_add.json?order_sn=' + this.order_sn,
					data: ''
				}).then((result) => {
					if(result.data.code==1){
						this.goods = result.data.data.mall_order.item_list;
						this.createScore(this.goods);
						this.getCommodityId(this.goods);
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//根据产品详情创建所需数组
			createScore:function(arr){
				let len = arr.length;
				for(var i=0;i<len;i++){
					this.score.push(this.starval);
					this.level.push(this.levelval);
				}
			},
			getCommodityId:function(arr){
				let len = arr.length;
				for(var i=0;i<len;i++){
					this.commodity_ids.push(arr[i].commodity_id);
					this.sku_id.push(arr[i].sku_id);
				}
			},
			getScore:function(val){
				//console.log(val.value);
				//this.scoreval = [];
				this.scoreval = val.value;
			},
			getService:function(val){
				this.serviceval = val.value;
			},
			getSpeed:function(val){
				//console.log(val);
				this.speedval = val.value;
			},
			//微信图片上传
			getWXUpload: function() {
				let _this = this;
				let shareUrl = window.location.href;
				var params = {
					url: shareUrl,
				}
				this.$http({
					method: 'POST',
					url: '/los/api/oauth/script',
					data: params,
				}).then((result) => {
					if(result) {
						wx.config({
							//result.data.debug
							debug: result.data.debug,
							appId: result.data.appId,
							timestamp: result.data.timestamp,
							nonceStr: result.data.nonceStr,
							signature: result.data.signature,
							jsApiList: result.data.jsApiList,
						});
						wx.ready(function() {

						});
						wx.error(function(res) {});
					} else {
						alert('获取信息失败 请重新尝试');
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			wxChooseImage: function() {
				let _this = this;
				let images = {
					localIds: [],
					serverId: []
				};
				wx.chooseImage({
					count: 8,
					needResult: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(data) {
						images.localId = data.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
						let i = 0;
						let length = images.localId.length;
						let upload = function(localId) {
							wx.uploadImage({
								localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
								isShowProgressTips: 1, // 默认为1，显示进度提示
								success: function(res) {
									i++;
									//									images.serverId.push(res.serverId); // 返回图片的服务器端ID
									//									var serverIds = images.serverId;
									//如果还有照片，继续上传
									if(i < length) {
										_this.postImg(res.serverId, upload(images.localId[i]));
									} else {
										_this.postImg(res.serverId);
									}
								}
							});
						}
						upload(images.localId[i]);
					},
					fail: function(res) {
						//alterShowMessage("操作提示", JSON.stringify(res), "1", "确定", "", "", "");
						console.log(res);
					}
				})
			},
			//上传图片接口
			postImg: function(serverIds, fun = function() {}) {
				let _this = this;
				this.serverIds = serverIds;
				var str = '';
				var imgcount = 7;
				let view = $('#photos');
				var params = {
					media_id: this.serverIds
				}
				this.$http({
					method: 'POST',
					url: '/los/api/member/wxmedia_to_base64.json',
					data: params
				}).then((rst) => {
					if(rst.data.code == 1) {
						var imgLists = rst.data.data;
						_this.imgval = [];
						_this.imgval.push(imgLists);
						if(view.find('img').length > imgcount) {
							alert('最多上传8张图片')
						} else {
							for(var index = 0; index < imgLists.length; index++) {
								str = '<div class="item">' +
									'<img src ="' + imgLists[index].img_base64 + '"/>' +
									'<p class="add">主图</p>' +
									'<a href="javascript:;" class="del">删除</a>' +
									'<input type="hidden" id="images" name="images[]" value="' + imgLists[index].img_base64 + '"/>'; +
								'</div>';
								view.append(str);
							}
							//点击删除
							$(".del").on("click", function() {
								$(this).parent().remove();
								$(".last").show();
							});
							fun();
						}

					}
				}).catch((err) => {
					//					alert('err:' + JSON.stringify(err));
				});
			},
			//点击删除图片
			delUploadImg: function(index) {
				this.imgval.splice(index, 1);
			},
			submitComment:function(){
				let _this = this;
				let len = this.commodity_ids.length;
				_this.formdata = [];
				for(var i=0;i<len;i++){
					let params = {
						comment_star:this.scoreval,
						service:this.serviceval,
						speed:this.speedval,
						comment_info:this.content[i],
						comment_imgs:this.imgval,
						commodity_id:this.commodity_ids[i],
						sku_id:this.sku_id[i]
					}
					_this.formdata.push(params);
				}
				console.log(_this.formdata);

				this.$http({
					method:'POST',
					url:'/los/api/mall_member/comment_add.json',
					data:{
						comment_data:_this.formdata,
						order_sn:_this.order_sn
					}
				}).then((res)=>{
					//console.log(res);
					if(res.data.code == 1){
						//this.question_list = res.data.data.goods_qa;
						console.log(res);
					}
				}).catch((err)=>{
					console.log(err);
				})
			}
		}
	}
</script>

<style scoped>
	.header {
		background-color: #fff !important;
	}
	.product-list{
		margin-top: 0.02666rem;
		margin-bottom: 0.26666rem;
	}
	.product-list .product-item{
		background-color: #fff;
	}
	.other{
		padding: 0.13333rem 0;
		margin-bottom: 1.6rem;
		background-color: #fff;
	}
	.product-list .product-item .intro,
	.other .intro{
		margin: 0 0.4rem;
		padding: 0.26666rem 0;
		display: flex;
		border-bottom: solid 1px #e6e6e6;
	}
	.other .intro{
		padding: 0.26666rem 0;
		border-bottom: none !important;
	}
	.product-list .product-item .intro .name,
	.other .intro .name{
		margin-right: 0.4rem;
		font-size: 0.37333rem;
		color: #222;
	}
	.product-list .product-item .intro .score,
	.other .intro .score{
		flex: 1;
	}
	.product-list .product-item .comment{
		padding: 0.4rem;
		padding-bottom: 0.26666rem;
	}
	.product-list .product-item .comment .txtarea-comment{
		width: 100%;
		height: 2.72rem;
		line-height: 0.56rem;
		font-size: 0.37333rem;
		text-align: justify;
		outline: none;
		margin-bottom: 0.13333rem;
	}
	.product-list .product-item .img-list{
		overflow: hidden;
	}
	.product-list .product-item .img-list:after{
		content: '';
		clear: both;
	}
	
	
	/*.product-list .product-item .img-list .last {
		
	}*/
	
	.product-list .product-item  .last .fileprew {
		position: absolute;
		top: 0;
		left: 0;
		width: 2.10666rem;
		height: 2.10666rem;
		font-size: 1.33333rem;
		opacity: 0;
		/* 实现的关键点 */
		filter: alpha(opacity=0);
		/* 兼容IE */
	}
	.product-list .product-item .comment .upload{
		width: 2.10666rem;
		height: 2.10666rem;
		padding: 0.43rem 0;
		border: #ccc dashed 1px;
		display: block;
		vertical-align: middle;
		text-align: center;
	}
	.product-list .product-item .comment .upload span{
		font-size: 0.32rem;
		padding-top: 0.13333rem;
		color: #bfbfbf;
		display: block;
	}
	.product-list .product-item .comment .upload img{
		margin: 0 auto;
		width: 0.61333rem;
		height: 0.50666rem;
	}
	.product{
		display: flex;
		border-radius: 0.13333rem;
		font-size: 0;
		padding: 0.4rem;
		align-items: center;
	}
	.product .img{
		width: 1.81333rem;
		height: 1.81333rem;
		border-top-left-radius: 0.13333rem;
		border-bottom-left-radius: 0.13333rem;
	}
	.product .img img{
		width: 1.81333rem;
		height: 1.81333rem;
		border-top-left-radius: 0.13333rem;
		border-bottom-left-radius: 0.13333rem;
	}
	.product .detail{
		flex: 1;
		line-height: 1;
		padding: 0.26666rem 0.4rem 0.26666rem 0.26666rem;
		overflow: hidden;
	}
	.product .detail .name{
		font-size: 0.37333rem;
		white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	}
	.product .detail .price{
		margin-top: 0.5rem;
	}
	.product .detail .now-price{
		font-size: 0.45333rem;
		color: #DD2835;
		font-weight: bold;
	}
	.product .detail .now-price i{
		font-size: 0.26666rem;
		font-style: normal;
		float: left;
	}
	.product .detail .orig-price{
		font-size: 0.26666rem;
		color: #666;
		margin-left: 0.26666rem;
		text-decoration: line-through;
	}
	.product .add-cart{
		width: 1.04rem;
		height: 1.04rem;
		text-align: center;
		background-color: #f5f5f5;
		border-radius: 50%;
		display: flex;
	    align-items: center;
	    justify-content: center;
	}
	.product .add-cart img{
		width: 0.50666rem;
		height: 0.50666rem;
	}
	.product .add-cart span{
		font-size: 0.32rem;
		color: #666;
	}
	.img-list .last {
		position: relative;
		float: left;
		width: 2.10666rem;
		height: 2.10666rem;
		margin-bottom: 0.24rem;
	}
	
	.img-list .item {
		position: relative;
		float: left;
		width: 2.10666rem;
		height: 2.10666rem;
		margin-right: 0.24rem;
		margin-bottom: 0.24rem;
	}
	
	.img-list .item .add {
		display: none;
	}
	
	.img-list .item:first-child .add {
		display: block;
		width: 100%;
		height: 0.61rem;
		line-height: 0.61rem;
		position: absolute;
		color: #fff;
		font-size: 0.32rem;
		text-align: center;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
	}
	
	.img-list .item:nth-child(4n) {
		margin-right: 0;
	}
	
	.img-list .item img {
		width: 2.10666rem;
		height: 2.10666rem;
	}
	
	.img-list .item .del {
		position: absolute;
		right: 0.10666rem;
		top: 0.10666rem;
		width: 0.58666rem;
		height: 0.58666rem;
		font-size: 0;
		background: url(../assets/images/home/icon_del.png) center center no-repeat;
		background-size: 100%;
	}
	.publish-add{
		padding: 0.26666rem 0.4rem;
		width: 100%;
		height: 1.57333rem;
		position: fixed;
		left: 0;
		bottom: 0;
		border-top: solid 1px #e6e6e6;
		box-shadow:0px 1px 7px 0px rgba(230,230,230,1);
		display: flex;
		background-color: #fff;
	}
	.publish-add .add-input{
		
	}
	.publish-add .add-input input{
		width: 6.48rem;
		height: 1.04rem;
		padding: 0 0.26666rem;
		background-color: #f5f5f5;
		border-radius: 0.52rem;
		display: block;
	}
	.publish-add .add-input button{
		width:2.32rem;
		height:0.96rem;
		background:linear-gradient(90deg,rgba(221,40,53,1) 0%,rgba(221,40,87,1) 100%);
		border-radius:0.48rem;
		color: #fff;
		font-size: 0.4rem;
		margin-left: 0.4rem;
	}
	.publish-add .add-input button,
	.publish-add .add-input input{
		outline: none;
	}
	.comment-add{
		position: fixed;
		bottom: 0;
		left: 0;
	}
</style>